<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body class="index">
    <main class="index-content">
        <!-- banner -->

        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide slider1"></div>
                <div class="swiper-slide slider2"></div>
                <div class="swiper-slide slider3"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>


        <section class="main1">
            <div class="rank">
                今天排名
                <i id="rankNum">9</i>
            </div>
            <div class="checkIn">
                累计打卡 <i id="clockNum">23</i>天
                <button type="button" id="checkIn-btn">今日打卡</button>
            </div>
        </section>
        <section class="main2">
            <div class="sportData">
                <a href="#">运动数据</a>
            </div>
            <div class="badge">
                累计运动徽章
                <span>
                    <i id="badgeNum">3</i>枚
                </span>
            </div>
        </section>
        <section class="main3">
            <a href="#">课程训练</a>
        </section>
        <section class="main4">
            <a href="#">户外跑步</a>
        </section>
    </main>
    <!-- 底部导航 tabber -->
    <nav class="tabbar"></nav>
</body>

</html>